iT邦幫忙

DAY 14
2

網頁程式自學亂亂來系列 第 14

滑鼠移到物件上面浮出說明框--Jquery Tooltip

  • 分享至 

  • xImage
  •  

內容參考:http://jqueryui.com/tooltip/

Jquery plugin非常強大,標榜可以讓任何物件浮出說明框,

這邊先用選單來測試(官網是用一般文字以及表單做例子)

假設有四個選單,每個選單都有一個說明的話,語法如下擺放:

1.在裡面貼這些內容:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( document ).tooltip();
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>

*備註:label的樣式可以玩一玩,不過咧~類似的plugin不少,會用之後,應該可以google到一個比較喜歡的外觀來套用喇~

2.在中間貼上選單內容

<ul>
<li title="說明一">選單一</li>
<li title="說明二">選單二</li>
<li title="說明三">選單三</li>
<li title="說明四">選單四</li>
</ul>

*備註:說明n就是滑鼠移動到選單上時,會浮現出來的文字內容


上一篇
phpMyAdmin資料庫檔案太大無法匯入MySQL
下一篇
PHP Slim Framework 初次見面
系列文
網頁程式自學亂亂來30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言